<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		
			
		</script>
		<script type="text/javascript">
				size =window.screen.width/30;
				document.getElementsByTagName("html")[0].style.fontSize = size + "px";
			window.onload=function(){
				var page1=document.getElementById("page");
				
				var page2=document.getElementById("p1");
				var boy=document.getElementById("boy");
				var girl=document.getElementById("girl");
				boy.addEventListener("touchstart",function(){
					setTimeout(function(){
					page1.style.display="none";
					page2.style.display="block";
				},1900);
				page1.setAttribute("class","page1-1");
				},false);
				girl.addEventListener("touchstart",function(){
					setTimeout(function(){
					page1.style.display="none";
					page2.style.display="block";
				},1900);
				page1.setAttribute("class","page1-1");
				},false);
	
			}

		</script>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
	</head>

	<body>
		<audio id="player" src="static/牧羊曲-纯音乐-274655.mp3" autoplay="autoplay" loop="loop"></audio>
		<div id="page" class="page" style="display: block;">
			<div class="page1"></div>
			<div class="page2"></div>
			<div class="page3"></div>
			<div class="page4"></div>
			<div class="page5"></div>
			<div class="page6" id="boy"></div>
			<div class="page7" id="girl"></div>
			<div class="page8"></div>
		</div>
	<div id="p1" style="display:none ;">
		<div class="p2"></div>
		<div class="p3"></div>
		<div class="p4"></div>
		<div class="p5"></div>
		<div class="p6"></div>
		<div class="p7"></div>
		<div class="qiqiu">
			
		</div>
	</div>
	</body>

</html>